import React from 'react';
import {connect} from 'dva/index';
import {Button, DatePicker, Form, InputNumber, Modal} from 'antd';
import validator from '../../../utils/validator';
import CurrencySelect from '../../common/CurrencySelect';
import moment from 'moment';

const R = require('ramda');
const FormItem = Form.Item;
const dateFormatter = "YYYY-MM-DD";
const currencyRateDetail = Form.create()(class CurrencyRateDetail extends React.Component {
	constructor(props) {
		super(props);
		this.state = { open: false, disabled: false }
	}

	handleOpen = (disabled) => {
		this.setState({ open: true, disabled });
	}

	handleCancel = () => {
		this.setState({ open: false });
		this.props.form.resetFields();
	}

	handleSave = () => {
		this.props.form.validateFields({ force: true }, (errors, values) => {
			if (errors) return;
			values.id = this.props.currencyRate.dataSource && this.props.currencyRate.dataSource.id ? this.props.currencyRate.dataSource.id : null;
			values.ratetime = values.ratetime.format(dateFormatter);
			if (!R.equals(R.pick(Object.keys(values), this.props.currencyRate.dataSource), values)) {
				this.props.dispatch({
					type: values.id ? 'currencyRate/updateCurrencyRate' : 'currencyRate/addCurrencyRate',
					payload: {
						...values,
						onSuccess: () => {
							this.handleCancel();
							if (this.props.refreshList) this.props.refreshList();
						}
					}
				})
			} else this.handleCancel();
		})
	}

	render() {
		let dataSource = this.props.currencyRate.dataSource ? this.props.currencyRate.dataSource : {};
		let formItemLayout = { labelCol: { span: 6 }, wrapperCol: { span: 14 } };
		const { getFieldDecorator } = this.props.form;
		let footer = [
            <Button key="save" size="large" loading={this.props.loading} onClick={this.handleSave.bind(this)} style={{ display: this.state.disabled ? 'none' : 'inline-block' }}>保存</Button>,
            <Button key="cancel" size="large" loading={this.props.loading} onClick={this.handleCancel.bind(this, true)}>{this.state.disabled ? "关闭" : "取消"}</Button>
        ];
		return (
			<Modal maskClosable={false} visible={this.state.open} title={'汇率详情'} onCancel={this.handleCancel.bind(this)} footer={footer} confirmLoading={this.props.loading}>
				<Form>
					<FormItem {...formItemLayout} label="币种" hasFeedback>
						{getFieldDecorator('sourceCode', {
							rules: [{
								required: true, message: '请选择币种',
							}],
							initialValue: dataSource.sourceCode
						})(
							<CurrencySelect disabled={this.state.disabled || !!dataSource.id} />
							)}
					</FormItem>
					<FormItem {...formItemLayout} label="目标币种" hasFeedback>
						{getFieldDecorator('targetCode', {
							rules: [{
								required: true, message: '请选择目标币种',
							}],
							initialValue: dataSource.targetCode
						})(
							<CurrencySelect disabled={this.state.disabled || !!dataSource.id} />
							)}
					</FormItem>
					<FormItem {...formItemLayout} label="汇率" hasFeedback>
						{getFieldDecorator('rate',
							{
								rules: [
									{ required: true, message: '请输入汇率' },
									{ pattern: validator.DECIMAL6.pattern, message: validator.DECIMAL6.message }
								],
								initialValue: dataSource.rate
							})(

							<InputNumber disabled={this.state.disabled} maxLength="18" style={{ width: '100%' }} />
							)}
					</FormItem>
					<FormItem {...formItemLayout} label="汇率时间" hasFeedback>
						{getFieldDecorator('ratetime', {
							rules: [{
								required: true, message: '请选择汇率时间'
							}],
							initialValue: dataSource.ratetime ? moment(dataSource.ratetime, dateFormatter) : undefined
						})(
							<DatePicker disabled={this.state.disabled} style={{ width: '100%' }}/>
							)}
					</FormItem>
				</Form>
			</Modal>
		)
	}
})

function mapStateToProps(state) {
	return {
		loading: state.loading.models.currencyRate, currencyRate: state.currencyRate
	};
}

export default connect(mapStateToProps)(currencyRateDetail);